<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>政务服务-首页</title>
    <link href="/css/mui.min.css" rel="stylesheet"/>
    <link href="/css/build.css" rel="stylesheet" type="text/css"/>
    <script src="/js/mui.min.js"></script>
    <script src="/js/jquery-1.12.4.min.js"></script>
    <script src="/js/echarts.min.js"></script>
</head>
<body>
<div class="mui-content">
    <div class="mui-control-content mui-active">
        <!-- 头部背景图  start -->
        <div class="banner-content bg_box">
            <img src="/images/home_bg.jpg" width="100%"/>
        </div>
        <!-- 头部背景图  end -->

        <!-- 待办 start -->
        <div class="wait_handle">
            <div class="mui-slider">
                <div class="mui-slider-group">
                    <form action="/ppp" method="post">
                        <div class="mui-slider-item">

                            <div class="mui-table-view mui-grid-view">
                                <div class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"
                                     th:each="list:${all}">
                                    <a th:href="@{/www(id=${list.id})}">
                                        <span class="icon"><img src="/images/home_icon04.png"/></span>
                                        <div class="mui-media-body" th:text="${list.partNumAlias}">CCAR-26</div>
                                    </a>
                                </div>

                            </div>

                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- 待办 end -->

        <!-- 公告 start -->

        <div class="news_sj_dxs_box ">

            <div class="scrollnews flex-space-between flex-between-center">
                <!--	<span><img src="/images/gonggao.png"></span>-->
                <p>&nbsp;&nbsp;&nbsp;我的收藏</p>
                <ul>
                    <li><a  th:text="${a}" th:href="@{/selectCollection}">关于长江航务管理平台服务升级的通知</a></li>
                    <li><a  th:text="${b}" th:href="@{/selectCollection}">系统公告！</a></li>
                    <li><a  th:text="${c}" th:href="@{/selectCollection}">认真学习十九大精神，争取贯彻落实习总书记讲话</a></li>
                    <li><a  th:text="${d}" th:href="@{/selectCollection}">不忘初心，牢记使命</a></li>
                </ul>
                <a class="mui-icon mui-icon-arrowright" th:href="@{/selectCollection}"></a>
            </div>
        </div>

        <!-- 底部信息-->
        <div class="footer_box">
            <div class="footer_txt">
                <p>主办单位：交通运输部长江航务管理局</p>
                <p>备案号：鄂ICP备0500000026号</p>
            </div>
        </div>
    </div>

    <!-- 底部tabbar    start -->
    <nav class="mui-bar mui-bar-tab tabbar-bottom">
        <a class="mui-tab-item mui-active" href="javascript:;">
            <span class="mui-icon"><img src="/images/nav_home_on.png"/></span>
            <span class="mui-tab-label">首页</span>
        </a>
        <a class="mui-tab-item" onclick="window.location.href='hudong.html'">
            <span class="mui-icon"><img src="/images/nav_hudong.png"/></span>
            <span class="mui-tab-label">咨询</span>
        </a>
        <a class="mui-tab-item" onclick="window.location.href='/ooo'">
            <span class="mui-icon"><img src="/images/nav_user.png"/></span>
            <span class="mui-tab-label">我的</span>
        </a>
    </nav>
    <!-- 底部tabbar    end -->
    <script src="/js/echart_tab.js"></script>
    <script type="text/javascript">
        mui.init();

        // 系统公告滚动
        $(document).ready(function () {
            var timer;

            //滚动文字
            function runtxt() {
                $(".scrollnews ul").animate({marginTop: "-40px"}, 300,
                    function () {
                        $(".scrollnews ul li:last").after($(".scrollnews ul li:first"))
                        $(".scrollnews ul").css("margin-top", 0)
                    }
                )
            }

            var t = $(".scrollnews ul li").length;
            if (t == 1) {
                clearInterval(timer)
            } else {
                timer = setInterval(runtxt, 5000);
            }
        })

        //统计分析标题tab
        $(document).ready(function () {
            $("#tab_title li").mousedown(function () {
                var t = $(this).index();
                $(this).addClass("cur");
                $(this).siblings().removeClass("cur");
                $("#tab_box .con_box").hide().eq(t).show().css("height", "auto");
            })
        })

        //办件统计柱状图
        var dom = document.getElementById("bjtj_c");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        option = {
            legend: {
                "textStyle": {
                    "fontSize": 10
                },
                "top": "5%",
                "itemHeight": 10,
                "itemWidth": 15
            },
            tooltip: {},
            dataset: {
                dimensions: ['product', '类型1', '类型2', '类型3'],
                source: [
                    {product: '2018', '类型1': 43, '类型2': 85, '类型3': 93},
                    {product: '2019', '类型1': 83, '类型2': 73, '类型3': 55},
                    {product: '2020', '类型1': 86, '类型2': 65, '类型3': 82}
                ]
            },
            xAxis: {type: 'category'},
            yAxis: {},
            // Declare several bar series, each will be mapped
            // to a column of dataset.source by default.
            series: [
                {
                    type: 'bar',
                    "barWidth": 20
                },
                {
                    type: 'bar',
                    "barWidth": 20
                },
                {
                    type: 'bar',
                    "barWidth": 20
                }

            ]
        };
        ;
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }

    </script>
</div>
</body>
</html>
